﻿@{
    Layout = null;
}
@using TDF.Core.Configuration
@model Faurecia.WM.Service.Dtos.MachineDto
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style>
        body {
            font-family: Arial;
            margin: 0;
            padding: 0;
            height: 100%;
            width: 100%;
            background-color: #e5eaee;
        }

        ul, li, p {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        table {
            border-spacing: 0;
        }

        .mainbox {
            width: 1024px;
            margin: auto;
            overflow: hidden;
            height: 520px;
        }

        .header {
            height: 70px;
            width: 100%;
            background-image: url(../../images/header.png);
            background-repeat: repeat-x;
        }

        .header_logo {
            float: left;
            display: table;
            position: relative;
            margin-top: 10px;
            margin-left: 50px;
        }

        .header_number {
            color: #FFF;
            text-align: center;
            width: 40%;
            font-size: 40px;
            float: left;
            line-height: 70px;
        }

        .header_time {
            float: left;
            width: 25%;
            font-size: 20px;
            color: #FFF;
            text-align: center;
            line-height: 70px;
        }

        .per100 {
            width: 100%;
        }

        .top {
            height: 260px;
        }

        .down {
            height: 183px;
        }

        .top table {
            border: 1px solid #cdced1;
            height: 245px;
            box-shadow: -3px -2px 30px #BABABA;
            -moz-box-shadow: -3px -2px 30px #BABABA;
            -webkit-box-shadow: -3px -2px 30px #BABABA;
        }

        .top tr td {
            text-align: center;
        }

        .top .thead {
            height: 50px;
            background: #f0f1f4;
        }

            .top .thead th {
                border-bottom: 1px solid #ddd;
            }

        .top .tbody {
            background: #f0f1f4;
        }

        .second_tupian {
            float: left;
            margin-top: 100px;
            margin-right: 15px;
            margin-left: 15px;
        }

        .second_nei {
            background-image: url(../../images/a.png);
            background-repeat: no-repeat;
            height: 170px;
            width: 100px;
            text-align: center;
            float: left;
            font-size: 20px;
            line-height: 40px;
            margin: 0 14px;
        }

        .col-md-1 {
            width: 120px;
            text-align: center;
        }

            .col-md-1 strong {
                font-weight: 700;
                font-size: 30px;
            }

        .down table {
            width: 100%;
            border: 1px solid #c7c7c9;
            border-bottom: 0;
            border-right: 0;
        }

        .down tr td {
            width: 16.6666%;
            border-bottom: 1px solid #c7c7c9;
            text-align: center;
            background: #fff;
            height: 23px;
            border-right: 1px solid #c7c7c9;
            font-size: 14px;
        }

        .red {
            color: red;
        }

        .bold {
            font-weight: 700;
        }

        .down tr td.bg_blue {
            background: #00cdff;
            color: #000;
        }
    </style>
</head>
<body  style="zoom:0.75">
    <div class="mainbox">
        <!-- 头部 -->
        <div class="header">
            <div class="header_logo"><img style="width: 286px;height: 51px;" src="@Configs.Instance.GetValue("SystemLogo")" /></div>
            <div class="header_number">@Model.Number</div>
            <div class="header_time" id="divTime"></div>
        </div>
        <!-- 生产中 -->
        <table class="per100">
            <!-- 生产轴 -->
            <tbody>
                <tr class="top">
                    <td class="col-md-1">
                        <strong>
                            生产轴<br />
                            <span style="font-size:16px">Produce Axis</span>
                        </strong>
                    </td>
                    <td>
                        <table style="width:100%;">
                            <tbody>
                                <tr class="thead">
                                    <th width="40%">
                                        待生产<br />To Be Produced

                                    </th>
                                    <th width="20%">
                                        生产中<br />In Producing

                                    </th>
                                    <th width="40%">
                                        已下线<br />Finished

                                    </th>
                                </tr>
                                <tr class="tbody">
                                    <td colspan="3">
                                        <div id="PostionPlanItem"><div class="second_nei"> </div><div class="second_nei"></div><div class="second_nei"></div><div class="second_nei" style="color:#FFF; background-image: url(/images/b.png)"></div><div class="second_nei"> </div><div class="second_nei"> </div><div class="second_nei"> </div></div>
                                    </td>

                                </tr>

                            </tbody>
                        </table>

                    </td>
                </tr>
                <tr class="down">
                    <td class="col-md-1" style="text-align: left;">
                        <strong>
                            Batch
                            <br />
                            Building
                            <br />
                            Box
                        </strong>
                    </td>
                    <td>
                        <div id="divSSED"><table><tbody><tr> <td style="background-color:#8f8f8f">&nbsp;</td><td style="background-color:#8f8f8f">&nbsp;</td><td style="background-color:#8f8f8f">&nbsp;</td><td style="background-color:#8f8f8f">&nbsp;</td><td style="background-color:#8f8f8f">&nbsp;</td><td style="background-color:#8f8f8f">&nbsp;</td></tr><tr> <td style="background-color:#8f8f8f">&nbsp;</td><td style="background-color:#8f8f8f">&nbsp;</td><td style="background-color:#8f8f8f">&nbsp;</td><td style="background-color:#8f8f8f">&nbsp;</td><td style="background-color:#8f8f8f">&nbsp;</td><td style="background-color:#8f8f8f">&nbsp;</td></tr><tr><td style="background-color:#8f8f8f"></td><td style="background-color:#8f8f8f"></td><td style="background-color:#8f8f8f"></td><td style="background-color:#8f8f8f"></td><td style="background-color:#8f8f8f"></td><td style="background-color:#8f8f8f"></td></tr><tr><td style="background-color:#8f8f8f"></td><td style="background-color:#8f8f8f"></td><td style="background-color:#8f8f8f"></td><td style="background-color:#8f8f8f"></td><td style="background-color:#8f8f8f"></td><td style="background-color:#8f8f8f"></td></tr><tr> <td style="background-color:#8f8f8f">&nbsp;</td><td style="background-color:#8f8f8f">&nbsp;</td><td style="background-color:#8f8f8f">&nbsp;</td><td style="background-color:#8f8f8f">&nbsp;</td><td style="background-color:#8f8f8f">&nbsp;</td><td style="background-color:#8f8f8f">&nbsp;</td></tr><tr>  <td style="background-color:#8f8f8f">&nbsp;</td><td style="background-color:#8f8f8f">&nbsp;</td><td style="background-color:#8f8f8f">&nbsp;</td><td style="background-color:#8f8f8f">&nbsp;</td><td style="background-color:#8f8f8f">&nbsp;</td><td style="background-color:#8f8f8f">&nbsp;</td></tr><tr> <td style="background-color:#8f8f8f">&nbsp;</td><td style="background-color:#8f8f8f">&nbsp;</td><td style="background-color:#8f8f8f">&nbsp;</td><td style="background-color:#8f8f8f">&nbsp;</td><td style="background-color:#8f8f8f">&nbsp;</td><td style="background-color:#8f8f8f">&nbsp;</td></tr></tbody></table></div>
                    </td>
                </tr>


            </tbody>
        </table>
    </div>

    <script src="~/Scripts/assets/global/plugins/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        var ProductStorageTimeOut = 5000, MaxProductStorageCount = 7;
        function GetWeldZoneData() {

            $.ajax({
                type: "get",
                timeout: 50000,
                url: "/api/display/GetWeldZoneData",
                data: { machineId: "@Model.Id" },
                async: true,
                success: function (result) {
                    if (!result.Success) {
                        console.error(result.Message);
                    } else {
                        RenderData(result.Value);
                        console.info(result.Value);
                    }
                    setTimeout(function () { GetWeldZoneData(); }, ProductStorageTimeOut);
                }
            });
        }

        function RenderData(data) {
            $("#PostionPlanItem .second_nei").empty();
            //载入待生产和生产中的产品
            LoadProductData(data.ProductionPlans, function (i, product, eventData) {
                var domIndex = 3 - i;
                if (domIndex < 0) {
                    eventData.cancel = true;
                }
                return domIndex;
            });
            //载入已下线的产品
            LoadProductData(data.CompleteProducts, function (i, product, eventData) {
                var domIndex = i + 4;
                if (domIndex > 6) {
                    eventData.cancel = true;
                }
                return domIndex;
            });
            //载入BBB数据
            LoadBBBData(data.BBBInfo);
        }

        function LoadProductData(products, selectDomFunc) {
            for (var i = 0; i < products.length; i++) {
                var eventData = { cancel: false };
                var domIndex = selectDomFunc(i, products[i], eventData);
                if (eventData.cancel) {
                    break;
                }
                var product = products[i];
                var propertyValues = [];
                for (var j = 0; j < product.PropertyInfo.length; j++) {
                    propertyValues.push(product.PropertyInfo[j].Value);
                }
                $("#PostionPlanItem .second_nei:eq(" + domIndex + ")").append(propertyValues.join("<br/>"));
            }
        }

        function LoadBBBData(BBBInfo) {
            $("#divSSED table td").empty().css("background-color", "#8f8f8f");
            if (BBBInfo.OutputType === 2) {
                console.info("不支持一模多出的数据展示");
                return;
            }
            for (var i = 0; i < BBBInfo.Sources.length; i++) {
                var bbbColumn = BBBInfo.Sources[i];
                var columnName = bbbColumn.ColumnName;
                if (bbbColumn.ReleasedUpperLimit <= bbbColumn.Items.length) {
                    $("#divSSED table tr:eq(0) td:eq(" + i + ")").removeAttr("style").addClass("red bold").text("请换模");
                }
                $("#divSSED table tr:eq(1) td:eq(" + i + ")").removeAttr("style").text(columnName);

                for (var j = 0; j < bbbColumn.Items.length; j++) {
                    var rowIndex = 6 - j;
                    if (rowIndex < 2) {
                        break;
                    }
                    var vals = [];
                    var propertyInfo = bbbColumn.Items[j].PropertyInfo;
                    for (var t = 0; t < propertyInfo.length; t++) {
                        var ps = bbbColumn.Mould.split(',');
                        var isContinue = false;
                        for (var x = 0; x < ps.length; x++) {
                            if (ps[x].split(":")[0] === propertyInfo[t].PName) {
                                isContinue = true;
                                break;
                            }
                        }
                        if (isContinue) {
                            continue;
                        }
                        vals.push(propertyInfo[t].Value);
                    }
                    $("#divSSED table tr:eq(" + rowIndex + ") td:eq(" + i + ")").removeAttr("style").addClass("bg_blue").text(vals.join(" "));
                }
            }
        }

        function date2str(x, y) {
            var z = {
                y: x.getFullYear(),
                M: x.getMonth() + 1,
                d: x.getDate(),
                h: x.getHours(),
                m: x.getMinutes(),
                s: x.getSeconds()
            };
            return y.replace(/(y+|M+|d+|h+|m+|s+)/g, function (v) {
                return ((v.length > 1 ? "0" : "") + eval('z.' + v.slice(-1))).slice(-(v.length > 2 ? v.length : 2))
            });
        }
        function getTime() {
            $.ajax({
                type: "get",
                //timeout: 50000,
                url: "/api/display/GetTime",
                success: function (result) {
                    if (!result.Success) {
                        $("#divTime").html(date2str(new Date(), "yyyy-MM-dd hh:mm:ss"));
                    } else {
                        $("#divTime").html(result.Value);
                    }
                }
            });
            setTimeout(getTime, 1000);
        }

        $(function () {
            GetWeldZoneData();
            getTime();
            setTimeout(function () {
                location.reload();
            }, 1000 * 60 * 60);
        });
    </script>


</body>
</html>